/*reset*/
body,header,main,section,footer,div,p,h3,input,table,th,tr,td{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li{
  list-style: none;
}
input[type='text'],input[type='number']{
  width: 80%;
  margin-left:5px ;
  padding: 2px;
  box-shadow:
  3.3px 5.4px 5.3px rgba(0, 0, 0, 0.06),
  11.2px 18.1px 17.9px rgba(0, 0, 0, 0.079),
  50px 81px 80px rgba(0, 0, 0, 0.12);
  border: none;
  border-radius: 5px;
}
input[type='button']{
  width: 100%;
  margin-top: 5px;
  padding: 2px;
  box-shadow:
  3.3px 5.4px 5.3px rgba(0, 0, 0, 0.06),
  11.2px 18.1px 17.9px rgba(0, 0, 0, 0.079),
  50px 81px 80px rgba(0, 0, 0, 0.12);
  border: none;
  border-radius: 5px; 
}
input[type='button']:hover{
  box-shadow:
  3.3px 5.4px 5.3px rgba(0, 0, 0, 0.06) inset,
  11.2px 18.1px 17.9px rgba(0, 0, 0, 0.079) inset,
  50px 81px 80px rgba(0, 0, 0, 0.12) inset;
}
input[type='button']:active{
  border:1px solid black;
}
select{
  box-shadow:
  3.3px 5.4px 5.3px rgba(0, 0, 0, 0.06),
  11.2px 18.1px 17.9px rgba(0, 0, 0, 0.079),
  50px 81px 80px rgba(0, 0, 0, 0.12);
  border: none;
  border-radius: 5px; 
}
section > div > h3{
  text-align: center;
}
section > div > p{
  padding: 2px;
}
section > div > table {
  margin:0 auto;
  text-align: center;
}

/*color */
/* 蓝色渐变  （浅）#1488cc → （深）#2b32b2 */
/* 灰色渐变 #bbd2c5 → #536976 */
/*
.Teal-and-Gray-2-hex { color: #00BBC9; }浅蓝
.Teal-and-Gray-3-hex { color: #CACACA; }灰
.Teal-and-Gray-4-hex { color: #878787; }更灰
.Teal-and-Gray-5-hex { color: #202022; }黑
*/
body{
  background-color: #CACACA;
}
header{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow:
  2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07);
  background-color:#202022 ;
  color: #00BBC9;
}
header > div:nth-child(1) > h1:nth-child(2){
  display: none ;
}
header > div:nth-child(2){
  position: absolute;
  top: 0;
  right: 0;
}
header > div:nth-child(2) > ul{
  display: flex;
}
header > div:nth-child(2) > ul > li{
  font-size: 1.2rem;
  padding: 10px;
}
main{
  margin: 10px auto;
  width: 98%;
  display: flex;  
}
main > section{
  /*border: 1px solid tomato;*/
  display: flex;
  flex-direction: column;  
  align-items: center;
  border-radius: 10px;
}
main > section > div{
  width: 98%;
  padding: 10px;
}
/*学生操作*/
main > section:nth-child(1){  
  width: 25%;
  height:fit-content;
  background-color: #878787;
  box-shadow:
    9.1px 0px 7.5px rgba(0, 0, 0, 0.025),
    73px 0px 60px rgba(0, 0, 0, 0.05);
}
/* 上传头像 */
main > section:nth-child(1) .uploadImgBox{
  padding: 5px;
}
#uploadImg, #upgradeImg {
  /*width: 100%;*/
  box-shadow:
    9.1px 0px 7.5px rgba(0, 0, 0, 0.025),
    73px 0px 60px rgba(0, 0, 0, 0.05);
}
#uploadImg:hover, #upgradeImg:hover {
  box-shadow:
    9.1px 0px 7.5px rgba(0, 0, 0, 0.025) inset,
    73px 0px 60px rgba(0, 0, 0, 0.05) inset; 
}
#stuImageUpload , #stuImageUpgrade{
  margin-top: 5px;
  border: 1px solid lightgray;
  display: block;
  width: 100px;
  height: 100px;
}
/*学生列表*/
main > section:nth-child(2){
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*学生列表-搜索*/
main > section:nth-child(2) > div:nth-child(1){
  width: 96%;
  display: flex;
  justify-content: flex-end;
  background-color: #CACACA;
  border-radius: 10px;
  box-shadow:
    9.1px 0px 7.5px rgba(0, 0, 0, 0.025),
    73px 0px 60px rgba(0, 0, 0, 0.05);
}
/*搜索按钮*/
main > section:nth-child(2) > div > input[type='button']{
  width: 10%;
  margin-top: 0px;
  margin-left:5px ;
}
/*学生列表-列表*/
main > section:nth-child(2) > div:nth-child(2){
  width: 96%;
  padding: 10px;
}
main > section:nth-child(2) > div:nth-child(2) > table th,td{
  padding: 5px;
}
/*//学生头像*/
main > section:nth-child(2) > div:nth-child(2) > table #stuImage{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 100px;
}

/*分页按钮盒子*/
main > section:nth-child(2) > div:nth-child(3){
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
main > section:nth-child(2) > div:nth-child(3) > div:nth-child(2){
  padding: 5px;
  flex: 1;
  display: flex;
  justify-content: flex-end; 
  align-items: center;
}
/*分页按钮*/
main > section:nth-child(2) > div:nth-child(3) > div:nth-child(2) input{
  width: 40px;
  margin-left:5px ;
  padding: 2px;
}

/*班级老师操作*/
main > section:nth-child(3){
  width: 25%;
  height:fit-content;
  background-color: #878787;
  box-shadow:
    9.1px 0px 7.5px rgba(0, 0, 0, 0.025),
    73px 0px 60px rgba(0, 0, 0, 0.05);
}




/*响应式*/
@media screen and (max-width: 771px){
    header > div:nth-child(1) > h1:nth-child(1){ display: none ; }
    header > div:nth-child(1) > h1:nth-child(2){  display: block ; }
    main{
      flex-direction: column;  
      /*justify-content: center;*/
      align-items: center;
    }
    main > section{
      margin-top: 10px;
      width: 94%;
    }
    main > section:nth-child(1){  width: 94%; }
    main > section:nth-child(3){  width: 94%; }
}